<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <tree
          :treeprops="defaults"
          :treedatas="treedatas"
          @get-tree-click="handleNodeClick"
         
        ></tree>
      </el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>
          <div class="btn">
            <a-button
              class="btn_children"
              type="primary"
              icon="plus-circle"
              @click="showModal"
            >
              新增
            </a-button>
            <a-button class="btn_children" type="primary" icon="up">
              上移
            </a-button>
            <a-button class="btn_children" type="primary" icon="down">
              下移
            </a-button>
            <a-button class="btn_children" type="primary" icon="delete">
              删除
            </a-button>
          </div>

          <a-form-model
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            v-bind="layout"
          >
            <a-form-model-item label="上级部门" prop="pass">
              <a-tree-select
                v-model="value"
                style="width: 100%"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                :tree-data="treeData"
                :replace-fields='{title:"name",value:"ruid",key:"key",children:"children"}'
                placeholder="Please select"
                :tree-default-expand-all='false'
              >
              </a-tree-select>
            </a-form-model-item>
            <a-form-model-item label="部门名称" prop="checkPass">
              <a-input
                v-model="ruleForm.checkPass"
                type="text"
                autocomplete="off"
              />
            </a-form-model-item>
            <a-form-model-item label="显示顺序" prop="check">
              <a-input
                v-model="ruleForm.check"
                type="text"
                autocomplete="off"
              />
            </a-form-model-item>
            <a-form-model-item label="重点学科" prop="age">
              <a-tree-select
                v-model="values"
                style="width: 100%"
                :tree-data="treeDatas"
                tree-checkable
                :replace-fields='{title:"name",value:"ruid",key:"key",children:"children"}'
                :show-checked-strategy="SHOW_PARENT"
                search-placeholder="Please select"
              >
              </a-tree-select>
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button type="primary" @click="submitForm('ruleForm')">
                保存
              </a-button>
              <a-button
                style="margin-left: 10px"
                @click="resetForm('ruleForm')"
              >
                重置
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </el-main>
      </el-container>
    </el-container>
    <!-- modal -->
    <a-modal
      v-model="visible"
      ok-text="确认"
      cancel-text="取消"
      @ok="hideModal"
    >
      <p>Bla bla ...</p>
      <p>Bla bla ...</p>
      <p>Bla bla ...</p>
    </a-modal>
  </div>
</template>
<script>
let TreeSelect = httpVueLoader("../js/antd.js");
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
module.exports = {
  components: {
    tree: "url:./elTree.vue",
  },
  data() {
    let checkPending;
    let validatePass = (rule, value, callback) => {
      {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("Please input the password again"));
      } else {
        callback();
      }
    };
    return {
      id: "",
      ruleForm: {
        pass: "",
        checkPass: "",
        check: "",
        age: "",
      },
      rules: {
        pass: [{ required: true, validator: validatePass, trigger: "change" }],
        checkPass: [
          { required: true, validator: validatePass2, trigger: "change" },
        ],
        check: [{ validator: validatePass2, trigger: "change" }],
      },
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      },
      treeData: [
        {
          name: "部门",
          children: [],
        },
      ],
      treeDatas: [],
      values: [],
      value: "",
      SHOW_PARENT,
      visible: false,
      defaults: {
        //树状图默认样式
        children: "children",
        label: "name",
      },
      treedatas: {
        ref: "tree",
        tree_data: [
          {
            name: "部门",
            ruid:'0',
            children: [],
          },
        ],
        node_key: "ruid",
        current_node_key: "", //初始化默认选中节点
        default_expanded_keys: ["0"], //树状图默认打开节点
        highlight_current: false, //高亮显示节点
        default_expand_all: false,
        defaultShowNodes: [],
      },
    };
  },
  watch: {
    value(value) {
      this.ruleForm.pass = value;
      this.ruid = value;
      return this.ruid;
    },
    values(value) {
      this.ruids = value.toString();
      return this.ruids;
    },
  },
  beforeMount() {
    this.department();
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.value = "";
      this.values = [];
    },
    department() {
      this.$message.loading("Action in progress..", 2.5);
      axios
        .post(baseUrl+"platform/entitytree", {
          type: "department",
          rootnode: {
            RUID: "0",
            exist: "0",
            show: "0",
          },
          deep: -1,
          field: "RUID,name,parentid",
          key: {
            RUID: "ruid",
            name: "name",
            children: "children",
          },
          filter: [],
          order: [
            {
              fieldname: "name",
              type: "D",
            },
          ],
        })
        .then((res) => {
          if (res.status == 200) {
            this.$message.success("Loading finished", 2.5);
            this.treedatas.tree_data[0].children = res.data.nodes;
            this.treeData[0].children =  res.data.nodes
          }
        });
      axios
        .post(baseUrl+"platform/entitytree", {
          type: "column",
          rootnode: {
            RUID: "1ad180a50009a40bce",
            exist: "1",
            show: "0",
          },
          deep: -1,
          field: "RUID,name,parentid",
          key: {
            RUID: "ruid",
            name: "name",
            children: "children",
          },
          filter: [],
          order: [
            {
              fieldname: "name",
              type: "D",
            },
          ],
        })
        .then((res) => {
          this.treeDatas = res.data.nodes
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //保存
          axios
            .post(
             this.$baseUrl+"platform/ctrlmthdcaller?typeid=objectoperator&mthdname=saveObject",
              {
                type: "department",
                codeflag: "1",
                object: {
                  name: this.ruleForm.checkPass, //部门名称
                  RUID: this.ruid, //部门节点RUID
                  parentid: this.id, //上级节点
                  coresubject: this.ruids,
                },
              }
            )
            .then((res) => {
              if (res.data.cxajaxrc == "0") {
                this.department();
                this.treedatas.default_expanded_keys = [this.ruid]
                this.$message.success("保存成功", 2.5);
              } else {
                this.$message.error("保存失败", 2.5);
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      //改变或的数据
      //  console.log( dropNode.parent.data.children);
      // console.log('tree drop: ', dropNode.label, dropType);
    },
    handleNodeClick(datas) {
      if (datas.name == "部门") {
        this.$message.success("根节点不可选", 2.5);
        return;
      } else {
        this.ruleForm.checkPass = datas.name;
        this.ruleForm.check = datas.$treeNodeId;
        this.value = "部门";
        this.id = datas.ruid; //上级节点
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.value = "";
      this.values = [];
    },
    //新增
    showModal() {
      this.visible = true;
    },
    hideModal() {
      this.visible = false;
    },
  },
};
</script>
<style scoped>
.warpper .el-tree--highlight-current /deep/ .el-tree-node.is-checked > .el-tree-node__content {
  background-color: rgb(255, 235, 192);
  color: #333;
}
.warpper .el-tree--highlight-current /deep/ .el-tree-node.is-current > .el-tree-node__content {
  background-color: rgb(255, 235, 192);
  color: #333;
}
.el-tree /deep/ .el-tree-node .el-tree-node__content {
  margin:2px 0;
}
.el-tree /deep/ .el-tree-node__children .el-tree-node__content{
  margin:2px 0;
}
.left_tree {
  margin-top: 20px;
  margin-left: 10px;
  font-family: SimSun;
  font-size: 13px;
  text-align: left;
  border: rgb(181, 203, 236) 1px solid;
  padding: 10px;
  padding-bottom: 60px;
}

.btn_row {
  margin-bottom: 10px;
  line-height: 40px;
}
.span-ellipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.el-tree >>> .el-tree-node__label {
  font-size: 18px;
}
.btn {
  min-height: 60px;
  text-align: right;
  line-height: 60px;
}
.btn_children {
  margin-right: 20px;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>